<template>
  <div class="container">
    <el-card>
      <div class="header">
        <el-row>
          <el-col :span="4"><span class="title">学科名称</span></el-col>
          <el-col :span="20">
            <div class="search">
              <el-input placeholder="请输入内容" v-model.trim="listquery.subjectName"> </el-input>
              <el-button class="clear" @click="clear">清除</el-button>
              <el-button type="primary" @click="getList()">搜索</el-button>
            </div>
          </el-col>
        </el-row>
        <subject-add :editeId="editeId" :editeshow="editeshow" @edite="editenum" @add="getList()"></subject-add>
      </div>
      <el-alert class="alert" type="info" show-icon :closable="false">
        <template slot="title"> 数据一共{{ subjectData.counts }}条 </template>
      </el-alert>
      <template>
        <el-table :data="subjectData.items" border style="width: 100%;">
          <el-table-column type="index" label="序号" width="50"> </el-table-column>
          <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
          <el-table-column prop="username" label="创建者"></el-table-column>
          <el-table-column label="创建日期">
            <template slot-scope="scope">{{ scope.row.addDate | formdate }}</template>
          </el-table-column>
          <el-table-column label="前台是否显示" width="110">
            <template slot-scope="scope">
              <span v-text="scope.row.isFrontDisplay === 1 ? '是' : '否'"></span>
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录" width="80"> </el-table-column>
          <el-table-column prop="tags" label="标签" width="50"></el-table-column>
          <el-table-column prop="totals" label="题目数据" width="80"></el-table-column>
          <el-table-column label="操作" width="210">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="godirectorys(scope.row)">学科分类</el-button>
              <el-button type="text" size="mini" @click="gotags(scope.row)">学科标签</el-button>
              <el-button type="text" size="mini" @click="editeShow(scope.row.id)">修改</el-button>
              <el-button type="text" size="mini" @click="deleteSubject(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <page-tool @pageChange="pageChange" @pageSizeChange="pageSizeChange" :total="subjectData.counts" :paginationPagesize="subjectData.pagesize" :paginationPage="subjectData.page"></page-tool>
    </el-card>
  </div>
</template>

<script>
import { listSubjects, deleteSubjectById } from '@/api/hmmm/subjects'
import PageTool from '../components/pageTool'
import { parseTime } from '@/utils'
import SubjectAdd from '../components/subjects-add'
export default {
  data() {
    return {
      subjectData: [],
      listquery: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      editeshow: 0,
      editeId: null
    }
  },
  methods: {
    async getList() {
      const { status, data } = await listSubjects(this.listquery)
      if (status !== 200) {
        return this.$message.error('请求数据失败')
      }
      this.subjectData = data
    },
    pageChange(page) {
      this.listquery.page = page
      this.getList()
    },
    pageSizeChange(pagesize) {
      this.listquery.pagesize = pagesize
      this.getList()
    },
    editeShow(id) {
      this.editeId = id
      this.editeshow = 1
    },
    editenum(val) {
      this.editeshow = 0
    },
    async deleteSubject(id) {
      const res = await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res !== 'confirm') {
        return this.$message('已取消删除')
      }
      const { status } = await deleteSubjectById(id)
      if (status !== 200) {
        return this.$message.error('删除失败')
      }
      this.$message.success('删除成功')
       if (this.subjectData.items.length === 1 && this.listquery.page > 1) {
        this.listquery.page--
      }
      this.getList()
    },
    godirectorys(row) {
      this.$router.push({
        path: '/subjects/directorys',
        query: { id: row.id, name: row.subjectName }
      })
    },
    gotags(row) {
      this.$router.push({
        path: '/subjects/tags',
        query: { id: row.id, name: row.subjectName }
      })
    },
    clear(){
      this.listquery.subjectName = ''
      this.getList()
    }
  },
  created() {
    this.getList()
  },
  components: {
    PageTool,
    SubjectAdd
  },
  filters: {
    formdate(time) {
      return parseTime(time)
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 20px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      line-height: 36px;
    }
    .search {
      display: flex;
    }
    .clear {
      margin-left: 10px;
    }
  }
  .alert {
    margin: 15px 0;
  }
  a {
    color: skyblue;
    &:not(:last-child) {
      margin-right: 5px;
    }
  }
}
</style>
